<template>
  <div class="apply-dialog">
    <div v-if="thisDiv === 1 || thisDiv === 2">
      <div class="title" style="display: flex;">
        <div style="flex: 1; text-align: left;padding-left: 30px;font-size: 25px;">
          {{ models.eventName }}
        </div>
        <div class="btn-list flex flex-row align-center">
          <el-button type="warning" size="mini" :loading="saveLoading" @click="saveAction">暂存</el-button>
          <el-button type="primary" size="mini" :loading="submitLoading" @click="submitAction">上报</el-button>
          <el-button type="info" size="mini" @click="handleClose">返回</el-button>
        </div>
      </div>
      <el-form
        ref="generateForm"
        label-suffix=":"
        size="small"
        :model="models"
        :rules="rules"
        label-position="right"
        label-width="130px"
      >
        <div >
          <title-info title="上报⼈信息" >
            <reporter-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事人信息" >
            <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="当事患者信息" >
            <patient-info v-slot="left" :form-data="models" :this-div="thisDiv">
              <el-form-item v-slot="center" label="性别" prop="baqsjRecordProperty.sex">
                <el-select v-model="models.baqsjRecordProperty.sex" placeholder="请选择">
                  <el-option
                    v-for="item in sexList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-slot="right" label="ABO" prop="baqsjRecordProperty.abo">
                <el-input
                  :style="{ width: '200px' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordProperty.abo"
                />
              </el-form-item>
              <el-form-item v-slot="right" label="Rh(D)" prop="baqsjRecordProperty.rh">
                <el-input
                  :style="{ width: '200px' }"
                  placeholder="请输入"
                  v-model="models.baqsjRecordProperty.rh"
                />
              </el-form-item>
            </patient-info>
          </title-info>
        </div>
        <div >
          <title-info title="事件信息" >
            <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
        <div >
          <title-info title="输⾎反应详情" >
            <div slot="left" style="display: flex; width: 100%; flex-wrap: wrap; ">
              <div style="width: 100%">供⾎信息</div>
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="供⾎者关系" prop="baqsjRecordTransfusion.supplierRelationship">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.supplierRelationship"
                  />
                </el-form-item>
                <el-form-item label="⾎型" prop="baqsjRecordTransfusion.bloodType">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.bloodType"
                  />
                </el-form-item>
                <el-form-item label="⾎袋编号" prop="baqsjRecordTransfusion.bloodStorageNo">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.bloodStorageNo"
                  />
                </el-form-item>
                <el-form-item label="输⾎量" prop="baqsjRecordTransfusion.transfusionMount">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.transfusionMount"
                  />
                </el-form-item>
              </div>
              <div style="width: 100%">输⽤⾎液</div>
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="红细胞悬液" prop="baqsjRecordTransfusion.redCell">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.redCell"
                  />
                </el-form-item>
                <el-form-item label="浓缩⾎⼩板" prop="baqsjRecordTransfusion.plateletConcentrate">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.plateletConcentrate"
                  />
                </el-form-item>
                <el-form-item label="冷沉淀" prop="baqsjRecordTransfusion.coldSediment">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.coldSediment"
                  />
                </el-form-item>
                <el-form-item label="全⾎" prop="baqsjRecordTransfusion.fullBlood">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.fullBlood"
                  />
                </el-form-item>
                <el-form-item label="⾎浆" prop="baqsjRecordTransfusion.plasma">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.plasma"
                  />
                </el-form-item>
                <el-form-item label="其他" prop="baqsjRecordTransfusion.other">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.other"
                  />
                </el-form-item>
              </div>
              <div style="width: 100%">输⾎器</div>
              <div style="display: flex; width: 100%; flex-wrap: wrap; ">
                <el-form-item label="名称" prop="baqsjRecordTransfusion.transfusionApparatusName">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.transfusionApparatusName"
                  />
                </el-form-item>
                <el-form-item label="批号" prop="baqsjRecordTransfusion.batchNo">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.batchNo"
                  />
                </el-form-item>
                <el-form-item label="⽣产⼚家" prop="baqsjRecordTransfusion.manufactureFactory">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.manufactureFactory"
                  />
                </el-form-item>
                <el-form-item label="输⾎量" prop="baqsjRecordTransfusion.transfusionMount2">
                  <el-input
                    :style="{ width: '200px' }"
                    placeholder="请输入"
                    v-model="models.baqsjRecordTransfusion.transfusionMount2"
                  />
                </el-form-item>
              </div>
              <div style="width: 100%"/>
              <el-form-item label="不良反应" prop="badReactionArr" label-width="150px">
                <div style="display: inline-block; width: 100%">
                  <el-checkbox-group v-model="models.badReactionArr" style="display: inline-block">
                    <el-checkbox
                      v-for="(item, index) in badReactionList"
                      :key="index"
                      :label="item.value"
                    >
                      <div style="display: flex;align-items: center;">
                        <div style="display: flex;align-items: center;">
                          {{ item.label }}
                        </div>
                        <!--        二维数据              -->
                        <div v-if="models.badReactionArr && models.badReactionArr.indexOf('11') > -1 && item.value === '11'" style="margin-left: 5px;display: flex;align-items: center;">
                          (
                          <el-checkbox-group v-model="models.badReactionType1Arr">
                            <el-checkbox v-for="(item, index) in badReactionType1List" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                          </el-checkbox-group>
                          <el-input
                            v-if="models.badReactionType1Arr && models.badReactionType1Arr.indexOf('17') > -1"
                            :style="{ width: '200px', 'margin-left': '5px', display: 'inline-block' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordTransfusion.badReactionOther1"
                          />
                          )
                        </div>
                      </div>
                    </el-checkbox>
                    <el-input
                      v-if="models.badReactionArr && models.badReactionArr.indexOf('18') > -1"
                      :style="{ width: '200px', 'margin-left': '5px', display: 'inline-block' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordTransfusion.badReactionOther"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div style="width: 100%"/>
              <el-form-item label="输⾎史" prop="transfusionHistoryArr" label-width="150px">
                <div style="display: inline-block; width: 100%">
                  <el-checkbox-group v-model="models.transfusionHistoryArr" style="display: inline-block">
                    <el-checkbox
                      v-for="(item, index) in transfusionHistoryList"
                      :key="index"
                      :label="item.value"
                    >
                      <div style="display: flex;align-items: center;">
                        <div style="display: flex;align-items: center;">
                          {{ item.label }}
                        </div>
                        <!--        二维数据              -->
                        <div v-if="models.transfusionHistoryArr && models.transfusionHistoryArr.indexOf('1') > -1 && item.value === '1'" style="margin-left: 5px;display: flex;align-items: center;">
                          (
                          <el-input
                            :style="{ width: '200px', 'margin-left': '5px' }"
                            placeholder="请输入"
                            v-model="models.baqsjRecordTransfusion.transfusionHistoryOther1"
                          ><template slot="append">次</template></el-input>
                          )
                        </div>
                      </div>
                    </el-checkbox>
                    <el-input
                      v-if="models.transfusionHistoryArr && models.transfusionHistoryArr.indexOf('2') > -1"
                      :style="{ width: '200px', 'margin-left': '5px', display: 'inline-block' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordTransfusion.transfusionHistoryOther"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </div>
          </title-info>
        </div>
        <div >
          <title-info title="处理措施" >
            <measure-two-info slot="left" :form-data="models" :this-div="thisDiv">
              <el-form-item slot="right" label="医疗介入" prop="medicalInvolvedArr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.medicalInvolvedArr">
                    <el-checkbox v-for="(item, index) in medicalInterventionList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <div slot="right" style="width: 100%" />
              <el-form-item slot="right"  label="其他介入" prop="otherInvolvedArr">
                <div style="display: flex;">
                  <el-checkbox-group v-model="models.otherInvolvedArr">
                    <el-checkbox v-for="(item, index) in otherInterventionList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
                    <el-input
                      v-if="models.otherInvolvedArr && models.otherInvolvedArr.indexOf('134')  > -1"
                      :style="{ width: '200px', 'margin-left': '5px' }"
                      placeholder="请输入"
                      v-model="models.baqsjRecordHandle.otherInvolvedOther"
                    />
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </measure-two-info>
          </title-info>
        </div>
        <div >
          <title-info title="其他信息说明" >
            <other-info slot="left" :form-data="models" :this-div="thisDiv"/>
          </title-info>
        </div>
      </el-form>
    </div>
    <div v-if="thisDiv === 3">
      <div>
        <title-info title="上报⼈信息">
          <reporter-info slot="left" :form-data="models" :this-div="thisDiv" />
        </title-info>
      </div>
      <div>
        <title-info title="当事人信息">
          <party-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="当事患者信息">
          <patient-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="事件信息">
          <event-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
      <div>
        <title-info title="输⾎反应详情">
          <div slot="left">
            <table>
              <tr>
                <td class="td-title">供⾎信息</td>
                <td colspan="3">
                  <div>供⾎者关系: {{ models.baqsjRecordTransfusion.supplierRelationship || '' }}</div>
                  <div>⾎型: {{ models.baqsjRecordTransfusion.bloodType || '' }}</div>
                  <div>⾎袋编号: {{ models.baqsjRecordTransfusion.bloodStorageNo || '' }}</div>
                  <div>输⾎量: {{ models.baqsjRecordTransfusion.transfusionMount || '' }}</div>
                </td>
              </tr>
              <tr>
                <td class="td-title">输⽤⾎液</td>
                <td colspan="3">
                  <div>红细胞悬液: {{ models.baqsjRecordTransfusion.redCell || '' }}</div>
                  <div>浓缩⾎⼩板: {{ models.baqsjRecordTransfusion.plateletConcentrate || '' }}</div>
                  <div>冷沉淀: {{ models.baqsjRecordTransfusion.coldSediment || '' }}</div>
                  <div>全⾎: {{ models.baqsjRecordTransfusion.fullBlood || '' }}</div>
                  <div>⾎浆: {{ models.baqsjRecordTransfusion.plasma || '' }}</div>
                  <div>其他: {{ models.baqsjRecordTransfusion.other || '' }}</div>
                </td>
              </tr>
              <tr>
                <td class="td-title">输⾎器</td>
                <td colspan="3">
                  <div>名称: {{ models.baqsjRecordTransfusion.transfusionApparatusName || '' }}</div>
                  <div>批号: {{ models.baqsjRecordTransfusion.batchNo || '' }}</div>
                  <div>⽣产⼚家: {{ models.baqsjRecordTransfusion.manufactureFactory || '' }}</div>
                  <div>输⾎量: {{ models.baqsjRecordTransfusion.transfusionMount2 || '' }}</div>
                </td>
              </tr>
              <tr>
                <td class="td-title">不良反应</td>
                <td colspan="3">{{ getBadReactions(models.badReactionArr) || '' }}</td>
              </tr>
              <tr>
                <td class="td-title">输⾎史</td>
                <td colspan="3">{{ getTransfusionHistory(models.transfusionHistoryArr) || '' }}</td>
              </tr>
            </table>
          </div>
        </title-info>
      </div>
      <div>
        <title-info title="处理措施">
          <measure-two-info slot="left" :form-data="models" :this-div="thisDiv">
            <tr slot="right">
              <td class="td-title">医疗介入</td>
              <td>{{ formatMedicalInterventions(models.medicalInvolvedArr) || '' }}</td>
            </tr>
            <tr slot="right">
              <td class="td-title">其他介入</td>
              <td>{{ formatOtherInterventions(models.otherInvolvedArr) || '' }}</td>
            </tr>
          </measure-two-info>
        </title-info>
      </div>
      <div>
        <title-info title="其他信息说明">
          <other-info slot="left" :form-data="models" :this-div="thisDiv"/>
        </title-info>
      </div>
    </div>
  </div>
</template>

<script>
import { doSaveTransfusionBloodReaction } from '@/api/report/reportForm'

import titleInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/titleInfo.vue'
import reporterInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/reporterInfo.vue'
import partyInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/partyInfo.vue'
import patientInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/patientInfo.vue'
import eventInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/eventInfo.vue'
import measureTwoInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/measureTwoInfo.vue'
import otherInfo from '@/views/newBaqsj/apply/components/reportForm/dialog/otherInfo.vue'

export default {
  name: 'TransfusionBloodReaction',
  components: { titleInfo, reporterInfo, partyInfo, patientInfo, eventInfo, measureTwoInfo, otherInfo },
  data() {
    return {
      // 当前显示的div：1 dialog 2 详情 3 处置
      thisDiv: 0,
      models: {
        baqsjRecordTransfusion: {
          supplierRelationship: ''
        }
      },
      loading: false,
      dialogVisible: false,
      dialogDetailVisible: false,
      submitLoading: false,
      saveLoading: false,
      rules: {},
      sexList: [
        { value: '0', label: '男' },
        { value: '1', label: '女' },
        { value: '2', label: '其他' }
      ],
      badReactionList: [
        { value: '10', label: '无' },
        { value: '11', label: '有' },
        { value: '18', label: '其他' }
      ],
      badReactionType1List: [
        { value: '12', label: '发热' },
        { value: '13', label: '过敏' },
        { value: '14', label: '溶血' },
        { value: '15', label: '细菌' },
        { value: '16', label: '血红蛋白尿' },
        { value: '17', label: '其他' }
      ],
      transfusionHistoryList: [
        { value: '0', label: '无' },
        { value: '1', label: '有' },
        { value: '2', label: '其他' }
      ],
      medicalInterventionList: [
        { value: '120', label: '停⽌输⾎' },
        { value: '121', label: '急救' },
        { value: '122', label: '监测⽣命体征' },
        { value: '123', label: '对症治疗' },
        { value: '123', label: '持续观察' },
        { value: '123', label: '⽆菌⼱包裹后送细菌学检测' },
        { value: '125', label: '转诊或转院治疗' }
      ],
      otherInterventionList: [
        { value: '130', label: '予以病人家属慰问和支持' },
        { value: '131', label: '上报医院' },
        { value: '132', label: '通报上级主管部门' },
        { value: '133', label: '医务⼈员之间进⾏沟通' },
        { value: '134', label: '其他' }
      ]
    }
  },
  methods: {
    handleClose(val) {
      this.dialogVisible = false
      // 传到父组件
      this.$emit('close', val)
    },
    handleDetailClose() {
      this.dialogDetailVisible = false
    },
    getDetail(info) {
      this.models = {
        ...info,
        medicalInvolvedArr: (info.baqsjRecordHandle && info.baqsjRecordHandle.medicalInvolved) ? info.baqsjRecordHandle.medicalInvolved.split(',') : [],
        otherInvolvedArr: (info.baqsjRecordHandle && info.baqsjRecordHandle.otherInvolved) ? info.baqsjRecordHandle.otherInvolved.split(',') : [],
        badReactionArr: (info.baqsjRecordTransfusion && info.baqsjRecordTransfusion.badReaction) ? info.baqsjRecordTransfusion.badReaction.split(',') : [],
        badReactionType1Arr: (info.baqsjRecordTransfusion && info.baqsjRecordTransfusion.badReactionType1) ? info.baqsjRecordTransfusion.badReactionType1.split(',') : [],
        transfusionHistoryArr: (info.baqsjRecordTransfusion && info.baqsjRecordTransfusion.transfusionHistory) ? info.baqsjRecordTransfusion.transfusionHistory.split(',') : []
      };
      console.log(this.models);
    },
    editInfo(ruleInfo, info) {
      this.thisDiv = 2
      this.dialogVisible = true
      this.rules = ruleInfo
      this.getDetail(info)
    },
    detail(info) {
      this.thisDiv = 3
      this.dialogDetailVisible = true
      this.getDetail(info)
    },
    open(ruleInfo, modelInfo) {
      // 弹出框
      this.thisDiv = 1
      this.rules = {
        ...ruleInfo
      }
      this.models = {
        ...modelInfo,
        eventNo: 'TransfusionBloodReaction',
        eventName: '输血相关—输⾎反应事件',
        // 其他复选框
        // 处理措施=>医疗介入
        medicalInvolvedArr: [],
        //  处理措施=>其他介入
        otherInvolvedArr: [],
        // 事件差错详情 => 对象类型(不同的表单，定制不同)
        baqsjRecordTransfusion: {
          supplierRelationship: ''
        },
        // 事件差错详情 =>  (不同的表单，定制不同)
        transfusionHistoryArr: [],
        badReactionType1Arr: [],
        badReactionArr: []
      }
      this.dialogVisible = true
    },
    getBadReactions(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.badReactionList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '11') {
            const typeLabels = [];
            this.badReactionType1List.forEach(typeItem => {
              if (this.models.badReactionType1Arr && this.models.badReactionType1Arr.includes(typeItem.value)) {
                if (typeItem.value === '17') {
                  typeLabels.push(`其他（${this.models.baqsjRecordTransfusion.badReactionOther1 || ''}）`);
                } else {
                  typeLabels.push(typeItem.label);
                }
              }
            });
            labels.push(`有（${typeLabels.join(', ')}）`);
          } else if (item.value === '18') {
            labels.push(`其他（${this.models.baqsjRecordTransfusion.badReactionOther || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    getTransfusionHistory(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.transfusionHistoryList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '1') {
            labels.push(`有（${this.models.baqsjRecordTransfusion.transfusionHistoryOther1 || 0}次）`);
          } else if (item.value === '2') {
            labels.push(`其他（${this.models.baqsjRecordTransfusion.transfusionHistoryOther || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    formatMedicalInterventions(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.medicalInterventionList.forEach(item => {
        labels.push(item.label);
      });
      return labels.join(', ');
    },
    formatOtherInterventions(values) {
      if (!values || values.length === 0) return '';
      const labels = [];
      this.otherInterventionList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '134') {
            labels.push(`其他（${this.models.baqsjRecordHandle.otherInvolvedOther || ''}）`);
          } else {
            labels.push(item.label);
          }
        }
      });
      return labels.join(', ');
    },
    submitAction() {
      // 上报
      this.models.auditStatus = 2
      this.actionRequest()
    },
    saveAction(item) {
      // 草稿
      this.models.auditStatus = 1
      this.actionRequest()
    },
    actionRequest() {
      // 新增、编辑、暂存
      this.$refs['generateForm'].validate(valid => {
        if (valid) {
          this.$message({
            message: '正在操作请稍等...',
            type: 'warning'
          })
          this.saveLoading = true
          this.submitLoading = true

          // 处理复选框数据
          this.models.baqsjRecordHandle.medicalInvolved = this.models.medicalInvolvedArr.join(',');
          this.models.baqsjRecordHandle.otherInvolved = this.models.otherInvolvedArr.join(',');
          this.models.baqsjRecordTransfusion.badReaction = this.models.badReactionArr.join(',');
          this.models.baqsjRecordTransfusion.badReactionType1 = this.models.badReactionType1Arr.join(',');
          this.models.baqsjRecordTransfusion.transfusionHistory = this.models.transfusionHistoryArr.join(',');
          doSaveTransfusionBloodReaction(this.models).then(res => {
            if (res.resStatus !== 500) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.saveLoading = false
              this.submitLoading = false
              // 关闭弹出框
              this.dialogVisible = false
              this.handleClose(1)
            } else {
              this.$message({
                type: 'error',
                message: '操作失败!'
              })
              this.saveLoading = false
              this.submitLoading = false
            }
          })
        } else {
          this.$message({
            message: '请填写必填项',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
